<template>
  <div class="statistics2-container">
    <div class="query-container">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="报表">
          <el-select v-model="query.dateType" @change="dateTypeChange">
            <el-option label="日报" value="HOUR"></el-option>
            <el-option label="月报" value="DAY"></el-option>
            <el-option label="年报" value="MONTH"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备">
          <el-select v-model="query.table">
            <el-option
              :label="item.lable"
              :value="item.value"
              v-for="(item, index) in deviceList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-if="query.dateType === 'HOUR'"
            v-model="query.date"
            type="date"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
          <el-date-picker
            v-if="query.dateType === 'DAY'"
            v-model="query.date"
            type="month"
            format="yyyy-MM"
            value-format="yyyy-MM"
            placeholder="选择月份"
          ></el-date-picker>
          <el-date-picker
            v-if="query.dateType === 'MONTH'"
            v-model="query.date"
            type="year"
            format="yyyy"
            value-format="yyyy"
            placeholder="选择年份"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryClick">查询</el-button>
          <el-button type="success" @click="exportClick">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-container">
      <el-table :data="[1]" style="width: 100%;">
        <el-table-column label="设备" v-if="tableData.length">
          <el-table-column label="设备" width="150px">{{ deviceName }}</el-table-column>
          <el-table-column :label="item.name" v-for="(item, index) in tableData" :key="index" width="150px" >
            <p v-for="(ite, inde) in item.data" :key="inde">{{ ite.name }}：{{ ite.value }}</p>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import axios from 'axios'

export default {
  data() {
    return {
      query: {
        dateType: "MONTH",
        table: "",
        date: moment().format('YYYY')
      },
      table: '',
      deviceList: [],
      tableData: []
    };
  },
  async mounted() {
    await this.getBuildingList();
    await this.getList()
  },
  computed: {
    deviceName () {
      if (!this.deviceList.length) {
        return '-'
      }
      return this.deviceList.filter(item => item.value === this.table)[0].lable
    }
  },
  methods: {
    async getBuildingList() {
      const result = await this.$fetchGet("/common/findAllPowerEnum");
      result.result.supplyPower.forEach(item => {
        this.deviceList.push({
          value: item.code,
          lable: item.name
        });
      });
      this.table = this.query.table = this.deviceList[0].value
    },
    async getList () {
      const obj = {
        SUNPOWER: { // 分布式太阳能
          powerGenerationStr: '发电量'
        },
        MAINSPOWER: { // 市电供电
          supplyPowerStr: '供电量'
        },
        STORAGEPOWER: { // 储电设备
          supplyPowerStr: '充电量',
          freePowerStr: '放电量'
        },
        AIRSOURCE: { // 空气源热泵 
          consumePowerStr: '耗电量',
          supplycoolStr: '供冷量',
        },
        FUELBOILER: { // 燃气锅炉
          supplyAirStr: '耗气量',
          supplyHeatStr: '供热量'
        },
        SHALLOWLAND: { // 浅层地源热泵
          consumePowerStr: '耗电量',
          supplycoolStr: '制冷量',
          supplyHeatStr: '供热量'
        },
        STORAGEHEAT: { // 储热设备
          storagePowerStr: '储热量',
          supplyPowerStr: '供热量'
        },
        MUNICIPALHEAT: { // 市政供热
          munSupplyHeatStr: '供热量'
        }
      };
      const result = await this.$fetchGet(`/power/getSupplyPowerDtoByDateType/${this.query.dateType}/${this.query.date}/${this.query.table}`)
      this.table = this.query.table
      const arr = []
      result.result.forEach((item, index) => {
        arr[index] = {
          name: '',
          data: []
        }
        Object.keys(item).forEach(key => {
          arr[index].name = item['createTimeU']
          if (!obj[this.query.table][key]) {
            return;
          }
          console.log(key)
          arr[index].data.push({
            name: obj[this.query.table][key],
            value: item[key] || '-'
          })
        });
      });
      this.tableData.length = 0
      this.$nextTick(() => {
        this.tableData = arr
      })
    },
    queryClick() {
      if (!this.query.date) {
        this.$message.warning('请选择日期')
        return
      }
      this.getList()
    },
    dateTypeChange () {
      this.query.date = null
    },
    exportClick() {
      if (!this.query.date) {
        this.$message.warning("请选择日期");
        return;
      }
      let url = `/power/exportExcelSupplyPower/${this.query.dateType}/${this.query.date}/${this.query.table}`;
      axios({
        method: "get",
        url: url, // 请求地址
        responseType: "blob",
        headers: {
          "Content-Type": "application/json"
        }
      }).then(res => {
        const blob = new Blob([res.data]);
        const fileName = "供能侧统计.xls";
        const elink = document.createElement("a");
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href);
        document.body.removeChild(elink);
      });
    }
  }
};
</script>

<style lang="less">
.statistics2-container {
  padding: 50px;
  .table-container {
    margin-top: 30px;
    .el-table__header-wrapper {
      .cell {
        text-align: center;
      }
    }
  }
  .page-container {
    margin-top: 30px;
    text-align: right;
  }
}
</style>